<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/mod.js"></script>
		
	</head>
	
	<body>
		<div id="list_details"></div>
		<script id="test" type="text/html">
		<!-- 跑步下载 -->
		
		<article class="activity-explain line-gray-bottom">
			<%=title%>
			<% if (cost==0){%>
			<p id="cost" class="color-red f12">￥<%=cost%></p>
			<%}%>
			<% if (cost!=0){%>
			<p id="costT" class="color-red f12">￥<%=cost_content%></p>
			<%}%>
			<!-- <i class="ico-redact"></i> -->
		</article>
		
		<% if(place && place.length>0){%>
			<article class="color_gray line-gray-bottom p10">
				<i class="ico-location"></i><%=place%>
			</article>
		<%}%>
		
		<!-- 活动地址 -->
		<h3 class="time-bar line-gray">
			<i class="ico-time"></i>
			<%=stime%>-<%=etime%> 
		</h3>
		<article class="ad-box">
			<p class="count-down">
				距离竞赛开始还有 
				<span id="t_d"></span> 天 
				<span id="t_h"></span> 小时 
				<span id="t_m"></span> 分
			</p>
		<%for(var i=0;i< banner.length; i++) {%>
			<a href="<%=banner[i].link%>">
				<img src="<%=banner[i].img %>"/>
			</a>
		<%}%>
		</article>

		<% if (rule.length>0){%>
		<dl class="activity-explain line-gray-bottom">
			<dt>竞赛规则</dt>
			<dd style="width: 100%; text-align: left;">
				<%=rule %>
			</dd>
		</dl>
		<%}%>

		<% if (rule.length==0){%>
			<%if( type==3){%>
			<dl class="activity-explain line-gray-bottom">
				<dt>竞赛规则</dt>
				<dd>
					活动期限
					<span><%=timeLimit%>天</span>
				</dd>
				<dd>
					累计里程
					<span><%=target%>km</span>
				</dd>
			</dl>
			<%}%>
			<!-- 里程 竞赛规则-->
			<%if( type==4){%>
			<dl class="activity-explain line-gray-bottom">
				<dt>打卡规则</dt>
				<dd>
					每日里程
					<span><%=target%>km</span>
				</dd>
				<dd>
					目标打卡
					<span><%=days%>天</span>
				</dd>
			</dl>
			<%}%>
			<!-- 打卡 竞赛规则 -->
		<%}%>


		<section id="jsl" class="line-gray-bottom official rank-cut" style="display: none;">
			<h5 class="f24 color-white bg_blue_dark p10 ac">
				<i class="ico-badge"></i> 
				竞赛排行榜
			</h5>
			<h6 id="tab">
				<a id="tgroup" class="line">群组</a>
				<a id="tone">群成员</a>
			</h6>
			<!-- tab切换 -->
			<div id="group">
				
				<% if (type==3){%>
				<div class="rank-mileage">
				<ul class="list-01">
				<%for(var i=0;i< groupRank.length; i++) {%>
					<li>
						<span>
							<% if (groupRank[i].header.length>0){%>
							<img src="<%=groupRank[i].header%>" />
							<%}%>
							<% if (groupRank[i].header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							<% if (groupRank[i].rank==1){%>
							<% if (members[i].rank==1){%><i class="ico-crown-2"></i><%}%>
							<% if (members[i].rank==2){%><i class="ico-crowny-2"></i><%}%>
							<% if (members[i].rank==3){%><i class="ico-crownt-2"></i><%}%>
							<%}%>
						</span>
						<span><%=groupRank[i].name%></span>
						<span><b><%=groupRank[i].mileage %>km</b></span>
						<em><%=groupRank[i].rank%></em>
					</li>
					<%}%>
				</ul>
				</div>
				<%}%>
				<!-- 所有群组 目标里程-->
				<% if (type==4){%>
				<ul class="list-01">
				<%for(var i=0;i< groupRank.length; i++) {%>
					<li>
						<span>
							<% if (groupRank[i].header.length>0){%>
							<img src="<%=groupRank[i].header%>" />
							<%}%>
							<% if (groupRank[i].header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							
						</span>
						<span><%=groupRank[i].name%></span>
						<span><b><%=groupRank[i].mileage %>km</b></span>
					</li>
					<%}%>
				</ul>
				<%}%>
				<!-- 所有群组 打卡-->
			</div>
			<!-- 群组列表 -->
			<div id="one" style="display: none;">
				
				<% if (type==3){%>
				<div class="rank-mileage">
				<ul class="list-01" ;>
					<%for(var i=0;i< members.length; i++) {%>
					<li>
						<span>
							<% if ( members[i] .header.length>0){%>
							<img src="<%= members[i].header%>" />
							<%}%>
							<% if (members[i].header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							<% if (members[i].rank==1){%>
							<i class="ico-crown-2"></i>
							<%}%>
							<% if (members[i].rank==2){%>
							<i class="ico-crowny-2"></i>
							<%}%>
							<% if (members[i].rank==2){%>
							<i class="ico-crownt-2"></i>
							<%}%>
						</span>
						<span><%= members[i].nickname%></span>
						<span><b><%= members[i].mileage%>km</b></span>
						<em><%= members[i].rank%></em>
					</li>
					<%}%>
				</ul>
				</div>
				<%}%>

				<% if (type==4){%>
				<ul class="list-01" ;>
					<%for(var i=0;i< members.length; i++) {%>
					<li>
						<span>
							<% if ( members[i] .header.length>0){%>
							<img src="<%= members[i].header%>" />
							<%}%>
							<% if ( members[i] .header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							
						</span>
						<span><%=members[i].nickname%></span>
						<span><b><%=members[i].mileage%>km</b></span>
					</li>
					<%}%>
				</ul>
				<%}%>
				<!-- 所有成员 -->
			</div>
			<!-- 排行个人 -->
		</section>
		<!-- 排行榜 -->
		<section class="w640" style="padding-bottom: 42px">
			<div class="img-list line-gray">
				<span class="f15 color_gray mlr10 bold">已参加</span>
				<% for(var i=0; i< num ;i++){%>
					<% if (joins[i].header.length>0){%>
						<img src=<%=joins[i].header%> alt="">
					<%}%>
					<% if (joins[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
				<%}%>
				<i><%=joinNum%></i>
			</div>
			<article class="txt-01">
				<h5>活动说明</h5>
				<p><%=introduce%></p>
			</article>
			
			<%if (comment.length >0){%>
			<h3 class="f15 color_gray p10">全部评论</h3>
			<ul class="list-08">
				<% for(var i=0; i< comment.length ;i++) { %>
				<li>
					<% if (comment[i].header.length>0){%>
						<img src=<%=comment[i].header%>>
					<%}%>
					<% if (comment[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">
					<%}%>
					<dl>
						<dt>
							<%=comment[i].name%>
							<span class="ico-time"><%=comment[i].add_time %></span>
						</dt>
						<dd><%=comment[i].content.replace(/<at *.+ "">/, "@")%> </dd>
					</dl>
				</li>
				<%}%>
			</ul>
			<a href=""></a>
			<%}%>
			
		</section>
		 <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
		 下载虎扑跑步APP参加 精彩活动
		 </a>
	</script>

	<script>

		var gid = "{$gid}";
		var aid = "{$aid}";
		var num=0;
		$(function(){
			$.getJSON('{$staticHost}/groupWeb/newDetail', { aid:aid, gid:gid }, function(data, error) {
				data = data.result
				$("title").html(data.title);
				
				var info=formatActivityData(data);
				console.log(data)
				if(info.comment.length > 0) {
					for(var x in info.comment) {
						if(info.comment[x].add_time !== 'undefined') {
							var dateAddTime =  new Date(new Date(parseInt(info.comment[x].add_time) * 1000).getTime());
							var q = new Date(parseInt(info.comment[x].add_time) * 1000);
							addTime =xs(q.getMonth()+1)+"."+xs(q.getDate());
							addTimeY = q.getFullYear()+"."+xs(q.getMonth()+1)+"."+xs(q.getDate())
							function xs(n){ return n<10?("0"+n):n;}
							 //开始时间
							var dateNow=new Date();    
							var timeSpanSinceAdd=dateNow.getTime()-dateAddTime; 
							var days=Math.floor(timeSpanSinceAdd/(24*3600*1000))
 							var leave1=timeSpanSinceAdd%(24*3600*1000)   
							var hours=Math.floor(leave1/(3600*1000))
							var leave2=leave1%(3600*1000)        
							var minutes=Math.floor(leave2/(60*1000))
							var leave3=leave2%(60*1000)      
							var seconds=Math.round(leave3/1000)
							if(days>365){
								info.comment[x].add_time =addTimeY
							}else if(days>6){
								info.comment[x].add_time =addTime
							}else if(days>2&&days<=6){
								info.comment[x].add_time =days+"天前"
							}else if(hours>0&&hours<=12){
								info.comment[x].add_time =hours+"小时前"
							}else if(minutes>0&&minutes<60){
								info.comment[x].add_time =minutes+"分钟前"
							}
						}
						var content = info.comment[x].content;
						if(content.indexOf('<at ') >= 0) {
							content = content.replace(new RegExp('\<at', 'g'), '@<a');
							content = content.replace(new RegExp('\<\/at\>', 'g'), '</a>');
							info.comment[x].content = content;
						}
					}
				}

				template.config('escape', false);
				var imgWidth =document.body.clientWidth; 
				if(imgWidth==320){
					num = data.joins.length > 5 ? 5 : data.joins.length;
					data.num = num;
				}else if(imgWidth>320&&imgWidth<380){
					num = data.joins.length > 6 ? 6 : data.joins.length;
					data.num = num;
				}else{
					num = data.joins.length > 7 ? 7 : data.joins.length;
					data.num = num;
				}
				var html = template('test', data);
				document.getElementById('list_details').innerHTML = html;
				// soleAll();//当前用户样式
				console.log(num)
				$('#tgroup').click(function(){
	               $('#group').show();
	               $('#one').hide();
	               $('#tone').removeClass("line");
	               $('#tgroup').addClass("line");

		            });
		      	$('#tone').click(function(){
		           $('#one').show();
	               $('#group').hide();
	                $('#tgroup').removeClass("line");
	               $('#tone').addClass("line");

		        });
		        // tab切换
			});
	
		});
		    function formatActivityData(info) {
			if(info) {
			
			var s = info.stime;
			var d = new Date(parseInt(info.stime) * 1000);
			info.stime =d.getFullYear()+"."+xs(d.getMonth()+1)+"."
						+xs(d.getDate())+ " "+xs( d.getHours())+":"
						+xs(d.getMinutes());
			var q = new Date(parseInt(info.etime) * 1000);
			info.etime =q.getFullYear()+"."+xs(q.getMonth()+1)+"."
						+xs(q.getDate())+ " "+xs(q.getHours())+":"
						+xs(q.getMinutes());
			function xs(n){ return n<10?("0"+n):n;}
				
			if(info.cost == 0){
					info.cost = '免费';
				}
			function GetRTime(){
				  	var Tt = s;
				    var NowTime = ((new Date()).getTime()).toString().substr(0,10);
				    var t =Tt - NowTime;
				    var d=0, h=0, m=0;
				    if(t>=0){
				      d=Math.floor(t/60/60/24);
				      h=Math.floor(t/60/60%24);
				      m=Math.floor(t/60%60); 
				    }else{
				    	clearInterval(id);
				    	$(".ad-box p").html("报名已截止");
				    	$("#jsl").show();
				    }
					if (d<10) {
				     	d = '0'+d
				     }
				     if (h<10) {
				     	h = '0'+h
				     }
				     if (m<10) {
				     	m = '0'+m
				     }
				    $("#t_d").html(d);
				    $("#t_h").html(h);
				    $("#t_m").html(m);
				    }
				    // 倒计时
				var id=setInterval(GetRTime,0);
			}
			
			return info;
			}
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "//hm.baidu.com/hm.js?ff1a5cf371cda33c4cc2f31056bb770f";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
		</script>
		<script>
		 var newsUrl = window.location.href;
        var iconUrl = 'http://irun.hupu.com/static/images/share/icon.png';
        var dataForWeixin={
            appId:"",
              TLImg: iconUrl,
              url: newsUrl,
              title: document.title,
              desc:"虎扑跑步",
              fakeid:"",
              callback:function(){}
        };
        (function() {
            var onBridgeReady=function() {
            WeixinJSBridge.on('menu:share:timeline', function(argv) {
            (dataForWeixin.callback)();
                WeixinJSBridge.invoke('shareTimeline', {
                    "img_url":dataForWeixin.TLImg,
                    "img_width":"120",
                    "img_height":"120",
                    "link":dataForWeixin.url,
                    "desc":dataForWeixin.desc,
                    "title":dataForWeixin.title
                    }, function(res){});
                });
            };
            if(document.addEventListener) {
               document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if(document.attachEvent) {
               document.attachEvent('WeixinJSBridgeReady',onBridgeReady);
               document.attachEvent('onWeixinJSBridgeReady',onBridgeReady);
            }
        })();

        
	</script>
	</body>
{template 'show/web-footer'}
